<template>
	<div>
		<el-row :gutter="20" style="margin-top:10px;">
			<el-col :span="8">
				<div class="grid-content bg-purple">
					<el-card class="box-card">
						<h4 style="padding-left: 0px; position: relative;">呼叫</h4>
						<div slot="header" class="clearfix">
							<span>呼叫</span>
						</div>
						<el-button class="start">开始服务</el-button>
						<hr />

						<el-button type="primary" icon="el-icon-arrow-right">下一位</el-button>
						<el-button type="primary" icon="el-icon-video-pause">暂停</el-button>
						<br />
						<br />
						<el-button type="primary" icon="el-icon-s-custom">指定呼叫</el-button>
						<el-button type="primary" icon="el-icon-phone">大堂经理</el-button>

					</el-card>
				</div>
				<div>
					<el-card>
						<span>当前排队人数</span>
						<h3>{{queue}}</h3>
					</el-card>
					<el-card>
						<span>当前流水号</span>
						<h3>{{serNum}}</h3>
					</el-card>
					<el-card>
						<span>服务客户数</span>
						<h3>{{users}}</h3>
					</el-card>
					<el-card>
						<span>交易办理数</span>
						<h3>{{orders}}</h3>
					</el-card>
				</div>
			</el-col>
			<el-col :span="16">
				<div class="grid-content bg-purple">
					<el-card class="box-card">
						<div slot="header" class="clearfix">
							<span>客户信息维护</span>
						</div>
						<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
							<el-menu-item @click="showBase()">基本信息</el-menu-item>
							<el-menu-item @click="showGuar()">监护人信息</el-menu-item>
							<el-menu-item @click="showNonTax()"> 非税收居民身份信息</el-menu-item>
						</el-menu>
						<br />
						<br />
						<el-form v-show="isBaseInfo" class="base" ref="form" :model="form" label-width="125px">
							<el-form-item label="常住地址">
								<el-col :span="11">
									<el-input v-model="form.addr"></el-input>
								</el-col>
								<el-col :span="4">
									<button @click="pullAddr()">同户籍地址</button>
								</el-col>
							</el-form-item>

							<el-form-item label="境外标志">
								<el-col :span="12">
									<el-select v-model="form.region" placeholder="请选择活动区域">
										<el-option label="0-境内居民" value="境内"></el-option>
										<el-option label="1-境外人士" value="境外"></el-option>
									</el-select>
								</el-col>
								<el-col :span="11">
									<el-form-item label="居住状况">
										<el-input v-model="form.addrState"></el-input>
									</el-form-item>
								</el-col>
							</el-form-item>
							<el-form-item label="住宅邮编">
								<el-col :span="11">
									<el-input v-model="form.postcode"></el-input>
								</el-col>
								<el-col :span="11">
									<el-form-item label="税收居民身份">
										<el-select v-model="form.tax" placeholder="请选择活动区域">
											<el-option label="0-仅为中国税收居民" value="单一"></el-option>
											<el-option label="1-多国税收居民" value="多元"></el-option>
										</el-select>
									</el-form-item>
								</el-col>
							</el-form-item>

							<el-form-item label="职业分类">
								<el-select v-model="form.profession" placeholder="请选择职业">
									<el-option label="3000-办事人员和有关人员" value="境内"></el-option>
									<el-option label="3001-非办事人员和有关人员" value="境外"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="行业分类">
								<el-col :span="11">
									<el-select v-model="form.industry" placeholder="请选择行业">
										<el-option label="0-计算机" value="0"></el-option>
										<el-option label="1-金融" value="1"></el-option>
										<el-option label="2-服务" value="2"></el-option>
									</el-select>
								</el-col>
								<el-col :span="11">
									<el-form-item label="是否农信员工">
										<el-select v-model="form.profession" placeholder="请选择职业">
											<el-option label="0-是" value="是"></el-option>
											<el-option label="1-否" value="否"></el-option>
										</el-select>
									</el-form-item>
								</el-col>
							</el-form-item>
							<el-form-item label="工作单位">
								<el-input v-model="form.work"></el-input>
							</el-form-item>
							<el-form-item label="工作单位地址">
								<el-input v-model="form.workAddr"></el-input>
							</el-form-item>
							<el-form-item label="电话号码">
								<el-col :span="11">
									<el-input v-model="form.tel"></el-input>
								</el-col>
								<el-col :span="8">
									<el-form-item label="是否认证">
										<el-select v-model="authState">
											<el-option label="0-是" value="认证"></el-option>
											<el-option label="1-否" value="未认证"></el-option>
										</el-select>
									</el-form-item>
								</el-col>
							</el-form-item>
							<el-form-item label="账/卡号">
								<el-col :span="11">
									<el-input v-model="form.cardID"></el-input>
								</el-col>
								<el-col :span="11">
									<el-form-item label="支取密码">
										<el-input type="password" v-model="form.pwd"></el-input>
									</el-form-item>
								</el-col>
							</el-form-item>

							<el-form-item label="验证码">
								<el-col span="11">
									<el-input v-model="form.verCode"></el-input>
								</el-col>
								<el-col span="8">
									<el-form-item label="认证状态">
										<el-select v-model="verState">
											<el-option label="0-是" value="认证"></el-option>
											<el-option label="1-否" value="未认证"></el-option>
										</el-select>
									</el-form-item>
								</el-col>
							</el-form-item>

							<el-form-item label="最新认证时间">
								<el-col>
									<el-date-picker type="date" placeholder="选择日期" v-model="form.authDate" style="width: 100%;"></el-date-picker>
								</el-col>
							</el-form-item>
							<el-form-item label="备注信息">
								<el-input v-model="form.remark"></el-input>
							</el-form-item>
							<el-form-item label="已核实的处理方式">
								<el-col :span="11">
									<el-select v-model="form.dealStyle">
										<el-option label="0-可正常办理" value="认证"></el-option>
										<el-option label="1-非正常办理" value="未认证"></el-option>
										<el-option label="2-不可办理" value="未认证"></el-option>
									</el-select>
								</el-col>
								<el-col :span="11">
									<el-form-item label="客户洗钱风险等级">
										<el-select v-model="form.derLevel">
											<el-option label="0-新客户" value="未知"></el-option>
											<el-option label="1-评级良好" value="中"></el-option>
											<el-option label="2-危险客户" value="高"></el-option>
										</el-select>
									</el-form-item>
								</el-col>
							</el-form-item>
							<el-form-item label="创建时间">
								<el-col :span="11">
									<el-date-picker type="date" placeholder="选择日期" v-model="form.createDate" style="width: 100%;"></el-date-picker>
								</el-col>
								<el-col :span="11">
									<el-form-item label="创建柜员">
										<el-input v-model="form.teller"></el-input>
									</el-form-item>
								</el-col>
							</el-form-item>

							<el-form-item>
								<el-button type="primary" @click="onSubmit">保存</el-button>
								<el-button @click="exit()">退出</el-button>
							</el-form-item>
						</el-form>

						<el-form v-show="isGuarInfo" class="guardian" ref="form" :model="formGuar" label-width="125px">
							<el-form-item label="证件类型">
								<el-col :span="11">
									<el-input v-model="formGuar.creType"></el-input>
								</el-col>
								<el-col :span="11">
									<el-form-item label="证件号码">
										<el-input v-model="formGuar.creNum"></el-input>
									</el-form-item>
								</el-col>
							</el-form-item>
							<el-form-item label="客户名称">
								<el-input v-model="formGuar.cusName"></el-input>
							</el-form-item>
							<el-form-item label="证件是否长期">
								<el-select v-model="formGuar.longTime">
									<el-option label="0-是" value="0"></el-option>
									<el-option label="1-否" value="1"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="证件起始时间">
								<el-col :span="11">
									<el-date-picker type="date" placeholder="选择日期" v-model="formGuar.start" style="width: 100%;"></el-date-picker>
								</el-col>
								<el-col :span="11">
									<el-form-item label="证件到期时间">
										<el-time-picker placeholder="选择日期" v-model="formGuar.end" style="width: 100%;"></el-time-picker>
									</el-form-item>
								</el-col>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="onSubmit1">修改</el-button>
								<el-button@click="exit()">退出</el-button>
							</el-form-item>
						</el-form>

						<el-form v-show="isNonTaxInfo" class="nonTax" ref="form" :model="formNonTax" label-width="125px">
							<el-form-item label="姓(英文或拼音)">
								<el-col :span="5">
									<el-input v-model="formNonTax.surname"></el-input>
								</el-col>
								<el-col :span="9">
									<el-form-item label="中间名(英文或拼音)">
										<el-input v-model="formNonTax.middleName"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="9">
									<el-form-item label="名(英文或拼音)">
										<el-input v-model="formNonTax.name"></el-input>
									</el-form-item>
								</el-col>
							</el-form-item>
							<el-form-item label="出生地址">
								<el-input v-model="formNonTax.birthAddr"></el-input>
							</el-form-item>
							<el-form-item label="居住地址">
								<el-input v-model="formNonTax.addr"></el-input>
							</el-form-item>
							<el-button @click="selectNonTaxInfo()">查询</el-button>
							<br />
							<br />
							<span>查询数据</span>
							<el-table :data="tableData" height="250" border style="width: 100%">
								<el-table-column prop="areaCode" label="税收居民国家/地区代码" width="180">
								</el-table-column>
								<el-table-column prop="idenNum" label="纳税人识别号" width="180">
								</el-table-column>
								<el-table-column prop="cause" label="无纳税人识别号原因">
								</el-table-column>
								</el-table-column>
								<el-table-column prop="jvtiyuanyin" label="具体原因">
								</el-table-column>
								<el-table-column fixed="right" label="操作" width="100">
									<template slot-scope="scope">
										<el-button type="text" size="small">查看</el-button>
										<el-button type="text" size="small">编辑</el-button>
									</template>
								</el-table-column>
							</el-table>
							<el-form-item>
								<el-button type="primary" @click="onSubmit1">修改</el-button>
								<el-button @click="exit()">退出</el-button>
							</el-form-item>
						</el-form>

					</el-card>
				</div>
			</el-col>

		</el-row>
	</div>
</template>

<script>
		import { mapState, mapGetters } from 'vuex';
	export default {
		data() {
			return {
				queue: 0,
				users: 0,
				orders: 78,
				serNum: 7657326487648,
				isNonTaxInfo: false,
				isGuarInfo: false,
				isBaseInfo: true,
				isLogin: '',
				form: {
					addr: '',
					region: '',
					postcode: '',
					tax: '',
					profession: '',
					tel: '',
					work: '',
					workAddr: '',
					industry: '',
					pwd: '',
					verCode: '',
					authState: '',
					authDate: '',
					remark: '',
					derLevel: '',
					dealStyle: '',
					createDate: ''

				},
				formGuar: {
					creType: '',
					creNum: '',
					start: '',
					end: '',
					longTime: '',
					cusName: ''

				},
				formNonTax: {
					name: '',
					surname: '',
					middleName: '',
					birthAddr: '',
					addr: '',
				},
				tableData: []

			}
		},
		beforeCreate() {
			if(getIsLogin() !=true){
				alert("未登录")
				this.$router.push("/")
			}
		},
		methods: {
			showBase() {
				this.isBaseInfo = true;
				this.isGuarInfo = false;
				this.isNonTaxInfo = false;
			},
			showGuar() {
				this.isBaseInfo = false;
				this.isGuarInfo = true;
				this.isNonTaxInfo = false;
			},
			showNonTax() {
				this.isBaseInfo = false;
				this.isGuarInfo = false;
				this.isNonTaxInfo = true;
			},
			selectNonTaxInfo() {
				this.tableData = [{
						areaCode: '2ew',
						idenNum: 'e',
						cause: 'qeq',
						jvtiyuanyin: 'qew'
					},
					{
						areaCode: '2ewew',
						idenNum: 'ewe',
						cause: 'qewq',
						jvtiyuanyin: 'wqew'
					}
				]
			},
			exit() {
				this.$store.dispatch('changeLogin', false)
				this.$store.dispatch('changeUsername', "")
				this.$store.dispatch('changePassword', "")
				alert("退出成功")
				this.$router.push("/");
			},
			getIsLogin(){
			  return this.isLogin = this.$store.getters.showIsLogin();
			},
			pullAddr(){
				this.form.addr = "我的省我的市我的县我的镇我的村我的组"
			}
			
		},
		computed:{
			...mapGetters(["showIsLogin"])
		}


	}
</script>

<style lang="css" scoped>
	span {
		padding-left: 0px;
		margin-left: 0px;
		position: relative;
	}

	//卡片样式
	.text {
		font-size: 14px;
	}

	.item {
		margin-bottom: 18px;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}

	.box-card {
		width: 100%;
	}

	//文本样式区
	.name-role {
		font-size: 16px;
		padding: 5px;
		text-align: center;
	}

	.sender {
		text-align: center;
	}

	.registe-info {
		text-align: center;
		padding-top: 10px;
	}

	.personal-relation {
		font-size: 16px;
		padding: 0px 5px 15px;
		margin-right: 1px;
		width: 100%
	}

	.relation-item {
		padding: 12px;

	}

	.dialog-footer {
		padding-top: 10px;
		padding-left: 10%;
	}

	//布局样式区
	.el-row {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.el-col {
		border-radius: 4px;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}
</style>
